<template>
  <div class="array-tags-display">
    <!-- 如果没有数据或数据为空数组，显示"无数据" -->
    <el-tag
      v-if="
        !modelValue || !Array.isArray(modelValue) || modelValue.length === 0
      "
      type="info"
    >
      无数据
    </el-tag>

    <!-- 渲染标签数组 -->
    <template v-else>
      <el-tag
        v-for="(item, index) in modelValue"
        :key="index"
        :type="item.tagType || 'primary'"
        class="tag-item"
      >
        {{ item.label }} (ID: {{ item.value }})
      </el-tag>
    </template>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义组件属性
const props = defineProps({
  // 对象数组数据
  modelValue: {
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped>
.array-tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag-item {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
